import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("item Rectangle")

    // 测试z值
    Rectangle {
        id: rect1
        x: 10
        y: 10
        z: 4
        width: 100
        height: 150
        color: "black"
    }

    Rectangle {
        id: rect2
        x: 30
        y: 10
        z: 3
        width: 100
        height: 150
        color: "red"
    }

    Rectangle {
        id: rect3
        x: 150
        y: 10
        z: 1
        width: 100
        height: 150
        color: "green"
    
        // 鼠标 键盘事件
        focus: true
        MouseArea {
            
            anchors.fill: parent
            onClicked: {
                parent.z += 1
                console.log("green z:", parent.z)
            }
        }

        Keys.onReturnPressed: {
            console.log("on return pressed")

        }
    }

    // 绝对平移
    Rectangle {
        id: rect4
        x: rect3.x + rect3.width + 40
        y: 10
        width: 100
        height: 150
        color: "blue"
    }

    // 相对平移
    Rectangle {
        id: rect5
        width: 100
        height: 150
        color: "yellow"
        anchors.left: rect4.right
        anchors.leftMargin: 40
        anchors.top: rect4.top
    }

    // 居中
    Rectangle {
        id: rect6
        width: 100
        height: 150
        color: "purple"
        // anchors.centerIn: parent

        //水平居中
        anchors.horizontalCenter: parent.horizontalCenter

        // 垂直居中 
        anchors.verticalCenter: parent.verticalCenter
    }

    // 旋转
    Rectangle {
        id: rect7
        width: 100
        height: 150
        color: "orange"
        anchors.top: rect4.bottom
        anchors.topMargin: 40

        anchors.left: rect1.left
        anchors.leftMargin: 80
        rotation: 150
    }

    // 边界
    Rectangle {
        
        id: rect8
        width: 100
        height: 150
        color: "pink"
        anchors.top: rect4.bottom
        anchors.topMargin: 40

        anchors.left: rect6.right
        anchors.leftMargin: 80

        border.width: 10
        border.color: "brown"  

        // 圆角
        radius: 30

        // 不透明度
        opacity: 0.5

        // 渐变色
        gradient: Gradient {
            GradientStop { position: 0.0; color: "red" }   
            GradientStop { position: 1.0; color: "yellow" }  
        }   
    }
}
